<template>
		<view style="padding: 20rpx;">
		
			<view class="acea-rows search">
				<view class="headerNav">品牌名称:</view>
				<input type="text" placeholder="请输入品牌名称" placeholder-class="placeholder-class" v-model="realname"
					class="searchInput" />
				<u-button style="width: 120rpx;height: 80rpx;" type="primary" @click="getList" text="查询"></u-button>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view id="demo1" class="scroll-view-item uni-bg-red">
					<view class="acea-row" v-for="(item,index) in dataList" :key="item.id">
						<view class="info line1" @click="confirm(item)">{{ item.realname }}</view>
					</view>
				</view>
			</scroll-view>
			<u-popup :show="popupShow" mode="center">
				<view style="width: 50vw;height: 500px;">
					<view>是否确认选择</view>
					<view>确认</view>
				</view>
			</u-popup>
		</view>
</template>

<script>
	import {BrandList} from "@/api/subletOfShop.js"
	export default{
		data(){
			return{
				popupShow:false,
				scrollTop:0,
				dataList:[],
				old: {
					scrollTop: 0
				},
				realname:'',
			}
		},
		mounted() {
			this.getList()
		},
		methods:{
			async getList(){
				BrandList({realname:this.realname}).then(res => {
					// console.log(res)
					this.dataList = res.data.list
					console.log(this.dataList)
				})
			},
			confirm(item) {
				console.log(item)
				this.$emit('clickBrand', item)
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		},
	}
</script>

<style>
	.scroll-Y {
		height: 600rpx;
		margin-top: 40rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 900rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 500rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.headerNav {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.popupTitle {
		font-size: 34px;
	}


	.info {
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;
	}

	.info:hover {
		border: 1px solid #999;
		border-radius: 15rpx;
		height: 70rpx;
	}

	.search {
		display: flex;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.search .searchInput {
		width: 75%;
		height: 80rpx;
		border-radius: 15rpx;
		border: 1px solid #999;
		margin: 0 20rpx;
		padding: 0 10rpx;
	}
	
	.placeholder-class {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(212, 212, 212, 1);
	}
</style>